const ap = [
    "&nbsp;&nbsp;&nbsp;&nbsp;中国人的传统饮食习俗是以植物性食料为主。" +
    "自古以来，中国人就非常重视谷物和蔬菜的摄入，认为五谷杂粮是养育生命的根本。" +
    "主食通常包括大米、面粉、玉米等，而辅食则以各种蔬菜为主，如白菜、萝卜、豆芽等。" +
    "此外，还会搭配一些少量的肉类作物，如鸡肉、猪肉、鱼肉等，以增加口感和营养。" +
    "这种饮食结构既符合中国人的饮食习惯，也有利于身体健康。",
    "&nbsp;&nbsp;&nbsp;&nbsp;\n" +
    "中国人的传统饮食习俗以植物性食料为主，主食主要包括五谷杂粮，如大米、面粉、玉米等。" +
    "这些谷物富含碳水化合物和纤维素，能够提供人体所需的能量和营养。辅食则以各种蔬菜为主，" +
    "如白菜、萝卜、豆芽等，这些蔬菜富含维生素、矿物质和膳食纤维，有助于保持身体健康。" +
    "此外，还会搭配一些少量的肉类作物，如鸡肉、猪肉、鱼肉等，以增加口感和蛋白质的摄入。" +
    "这种饮食结构既符合中国人的饮食习惯，也有利于身体健康。",
    "&nbsp;&nbsp;&nbsp;&nbsp;《黄帝内经》中提出了“五谷为养，五果为助，五畜为益，" +
    "五菜为充”的饮食观念。根据这一理念，人们应以五谷杂粮作为主要的食物来源，" +
    "如大米、面粉、玉米等，以提供身体所需的能量和营养。同时，辅以各种水果作为补充，" +
    "如苹果、香蕉、橙子等，以增加维生素和纤维素的摄入。" +
    "此外，适量食用肉类食物，如鸡肉、猪肉、鱼肉等，有助于补充蛋白质和必需的氨基酸。" +
    "最后，还应搭配各种蔬菜，如白菜、萝卜、豆芽等，以提供丰富的矿物质和膳食纤维。" +
    "这种饮食结构既符合中医养生的原则，也有利于维持身体的健康平衡。"
]
const data = [
    {url: "img/food1.png", title: ap[0]},
    {url: "img/food2.png", title: ap[1]},
    {url: "img/food3.png", title: ap[2]},
];
let img = document.querySelector(".centerPic");
const p = document.querySelector("#centerWindow p");

const next = document.querySelector('.next');
let i = 0;
//前进
next.addEventListener('click', function () {
    i++
    i = i >= data.length ? 0 : i;
    toggle()
})
//后退
const prev = document.querySelector('.prev');
prev.addEventListener('click', function () {
    i--;
    i = i < 0 ? data.length - 1 : i;
    toggle();
})


//定时器
let timeId = setInterval(function () {
    next.click();
}, 2000);
//鼠标进入
img.addEventListener('mouseenter', function () {
    clearTimeout(timeId);
})
//鼠标移出
img.addEventListener('mouseleave', function () {
    clearInterval(timeId);
    timeId = setInterval(function () {
        next.click();
    }, 1000);
})
p.addEventListener('mouseenter', function () {
    clearTimeout(timeId);
})
//鼠标移出
p.addEventListener('mouseleave', function () {
    clearInterval(timeId);
    timeId = setInterval(function () {
        next.click();
    }, 1000);
})
function toggle(){
    img.src = data[i].url;
    p.innerHTML = data[i].title;
}
const jump = document.querySelectorAll("#top>ul>li");
const href = [
    "subpage/subpage1.html",
    "subpage/subpage2.html",
    "index.html",
]
console.log(jump)
for (let i = 0; i < jump.length; i++) {
    jump[i].addEventListener('click', function () {
        window.location.href = href[i];
    })
}